<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center h3") ----时间设置----
            div(class="flex-column-item flex-row h3")
                div(class="flex-row-item right",)
                    span(:class="{'active-block': activeId == 0 ? true : false}") {{hour}}
                div(class="flex-row-item center",style="flex:0") :
                div(class="flex-row-item left")
                    span(:class="{'active-block': activeId == 1 ? true : false}") {{minute}}
            div(class="flex-column-item center")
                span(:class="{'active-block': activeId == 2 ? true : false}") {{year}}
                span -
                span(:class="{'active-block': activeId == 3 ? true : false}") {{month | fixedInterge2}}
                span -
                span(:class="{'active-block': activeId == 4 ? true : false}") {{date | fixedInterge2}}
</template>

<script>
    import dayjs from 'dayjs';
    import Base from '@/mixins/BaseVue';
    export default {
        mixins: [Base],
        data() {
            return {
                hour: dayjs().format("HH"),
                minute: dayjs().format("mm"),
                year: dayjs().format("YYYY"),
                month: dayjs().format("MM"),
                date: dayjs().format("DD"),
                activeId: 0
            };
        },
        methods: {
            up() {
                if (this.activeId == 0) {
                    const hour = parseInt(this.hour);
                    this.hour = hour == 23 ? 0 : hour + 1;
                }
                if (this.activeId == 1) {
                    const minute = parseInt(this.minute);
                    this.minute = minute == 60 ? 0 : minute + 1;
                }
                if (this.activeId == 2) {
                    this.year++;
                }
                if (this.activeId == 3) {
                    const month = parseInt(this.month);
                    this.month = month == 12 ? 1 : month + 1;
                }
                if (this.activeId == 4) {
                    const date = parseInt(this.date);
                    this.date = date == 30 ? 1 : date + 1;
                }
            },
            down() {
                if (this.activeId == 0) {
                    const hour = parseInt(this.hour);
                    this.hour = hour == 0 ? 23 : hour - 1;
                }
                if (this.activeId == 1) {
                    const minute = parseInt(this.minute);
                    this.minute = minute == 0 ? 60 : minute - 1;
                }
                if (this.activeId == 2) {
                    this.year--;
                }
                if (this.activeId == 3) {
                    const month = parseInt(this.month);
                    this.month = month == 1 ? 12 : month - 1;
                }
                if (this.activeId == 4) {
                    const date = parseInt(this.date);
                    this.date = date == 1 ? 30 : date - 1;
                }
            },

            back() {
                this.calTimeDiff();
                this.$router.push('/machine-setting')
            },
            yes() {
                this.activeId = this.activeId == 4 ? 0 : this.activeId + 1;
            },
            calTimeDiff() {
                // 计算出时差
                const format = `${this.year}-${this.month}-${this.date} ${this.hour}:${this.minute}:00`;
                const time = dayjs(format);
                let diff = dayjs().diff(time, 'seconds');
                if(time < dayjs()) diff = -diff;
                window.machine.timeDiff =diff;
                console.log(time,diff);
            }
        },
        created(){
            const configTime = dayjs().add(window.machine.timeDiff, "seconds");
            this.year = configTime.format('YYYY');
            this.month = configTime.format('MM');
            this.date = configTime.format('DD');
            this.hour = configTime.format('HH');
            this.minute = configTime.format('mm');
        }
    };
</script>

<style lang="less">
</style>
